<template>
    <div>
        <div class="common-window-menu"></div>
        <div class="content-header">
            <span>巫妖王</span>
        </div>
        <div class="content-main">
            <div class="content-main-left">
                <img class="content-main-left-img" style="width: 40px; height: 40px" src="~@/assets/350-400.jpg"/>
                <span class="content-main-left-datetime">巫妖王</span>
                <span class="content-main-left-datetime">2018/10/10 10:10:10</span>
                <div class="content-main-left-message">
                    <div>
                        你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！
                        你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！
                        你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！
                        你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！
                        你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！你们这是自寻死路！
                    </div>
                </div>
            </div>
            <div class="content-main-left me">
                <span class="content-main-left-datetime">巫妖王</span>
                <span class="content-main-left-datetime">2018/10/10 10:10:10</span>
                <img class="content-main-left-img" style="width: 40px; height: 40px" src="~@/assets/350-400.jpg"/>
                <div class="content-main-left-message">
                    <div>
                        你们这是自寻死路！你们这是自寻死路！
                    </div>
                </div>
            </div>
        </div>
        <div class="content-input">
            <div class="content-tool">
                <a>
                    <Icon type="ios-happy-outline" size="22" color="#333333"/>
                </a>
                <a>
                    <Icon type="ios-folder-outline" size="22" color="#333333"/>
                </a>
                <a>
                    <Icon type="ios-chatbubbles-outline" size="22" color="#333333"/>
                </a>
            </div>
            <div>
                <Input label="large" type="textarea" :autosize="{minRows: 4,maxRows: 4}" v-model="message"/>
            </div>
            <div class="content-submit">
                <Button type="default" :onclick="sendmsg()">Submit</Button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "user-content",
        data() {
            return {
                message: 'Hello Vue!'
            }
        },
        // 在 `methods` 对象中定义方法
        methods: {
            sendmsg() {
                console.log("1231232131232132121312")
                this.$socket.emit('onEvent', '321');
            }
        },
        sockets: {
            connect() {
                console.log('socket connected');
                this.$socket.emit('onEvent', '123');
            }
        }
    }

</script>

<style scoped>
    .common-window-menu {
        height: 25px;
    }

    .content-header {
        padding: 0 20px;
        height: 37px;
        font-size: 18px;
        border-bottom: #cccccc 1px solid;
    }

    .content-main {
        position: relative;
        padding: 0 20px;
        height: 360px;
        overflow: auto;
        border-bottom: #cccccc 1px solid;
    }
    .content-main-left {
        font-size: 14px;
    }
    .content-main-left-message {
        padding: 5px 5px;
        border: #cccccc 1px solid;
        border-radius: 5px;
    }

    .me {
        text-align: right;
    }


    .content-input {
        padding: 0 20px;
        height: 180px;
        background-color: #ffffff;
    }

    .content-tool {
        padding-top: 5px;
        height: 30px;
        color: #333333;
    }

    .content-tool a {
        margin-right: 10px;
    }

    .content-submit {
        margin-left: 440px;
    }
</style>